<template>
  <div class="index">
    <TopTitle :handleNumber=0 v-on:listenEverState="clickLeftIcon($event)" :Title="TitleText" :propsRightIcon='RightIcon' :propsLeftIcon='LeftIcon' :nextPage="nextText" ></TopTitle>
    <ul class="list">
      <li class="item" v-for="(item,index) in demo" :key="index" @click="handlerToPage(item)">{{item}}</li>
    </ul>

    <div>
      <!-- demo页面 -->
      <ul>
        <li @click="handlerToPage(item)" v-for="(item,index) in demoPage" :key="index" class="demo-page">{{item}}</li>
      </ul>
    </div>
    <div v-show="markIsShow?true:false" class="mark-layer" @click="handleMarkIsShow">
      <div class="mark-content">
        text
      </div>
    </div>

    <TabBar :code="code"></TabBar>
  </div>
</template>
<script>
import TabBar from './tabBar/tabBarCode'
import TopTitle from '@/components/topTitle/topTitle1'
export default {
  name: 'list',
  components:{
    TabBar,
    TopTitle
  },
  data () {
    return {
      demo:[
        "inputForm","imgPic","tabBar","topTitle","getCode",'EChart','demo'
      ],
      demoPage:[
        'lessCss'
      ],
      code:0,
      TitleText:'home',
      LeftIcon:require('../assets/icon/dizhi1.png'),
      RightIcon:require('../assets/icon/zhaoxiangji.png'),
      nextText:'baidu',
      markIsShow:false
    }
  },
  methods:{
    handlerToPage(page){
      console.log(page)
      this.$router.push("/"+page)
    },
    clickLeftIcon:function (event){
      this.markIsShow=event
    },
    handleMarkIsShow(){
      this.markIsShow=!this.markIsShow
    }
  },
}
</script>
<style scoped>
.list .item,.demo-page{
  line-height: 50px;
  padding:0 32px;
}
.list .item:last-child{
  line-height: 80px;
  padding:0 32px;
  font-size:32px;
  color:red
}
.mark-layer{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color:rgba(0, 0, 0, 0.3);
  z-index: 11
}
.mark-content{
  background-color:#fff;
}
</style>
